<template>
    <input class="todo-input" v-model="title" placeholder="请输入任务并按回车键保存" @keyup.enter="sendAdd" />
</template>
<script lang="ts" setup>
import { reactive,ref, watch } from 'vue';

interface dataEntity {
    title:string;
    status:number;   //0 未完成，1已完成 -1已删除
    id:number;
}

const title = ref('')

    /* let newTodo:dataEntity = reactive({
        title:'',
        status:0,
        id: new Date().getTime()
    }) */
    /* watch(()=>newTodo.title,(title)=>{
        console.log(title)
    }) */

    const emit = defineEmits<{
                    (e:'add',obj:dataEntity):void
                }>()

    const sendAdd= function(e:KeyboardEvent | Event):void{
        let newTodo:dataEntity ={
            title:title.value,
            status:0,
            id: new Date().getTime()
        }
        console.log(newTodo.id)
        emit('add',newTodo);
        //newTodo.title = ''
        (e.target as HTMLInputElement).value = ''
    }
</script>
<style lang="less" scoped>
    .todo-input{
        width:100%;
        height: 35px;
        padding:2px 10px;
        line-height: 31px;
        box-shadow: -4px 4px 8px inset rgba(0, 0, 0, 0.2),4px -4px 8px inset rgba(255, 255, 255, 0.6);
        border:none;
        border-radius: 6px;
        box-sizing: border-box;
        &:focus,
        &:hover{
            outline: none;
        }
    }

    /* box-shadow: -6px 6px 8px inset rgba(255, 255, 255, 0.6),
    6px -6px 8px inset rgba(0, 0, 0, 0.2);*/
</style> 